<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue</title>
    <script src="../../引入vue2.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #app {
        width: 100vw;
        height: 100vh;
      }
      .lqb_tabs {
        display: flex;
        align-items: center;
        height: 50px;
        overflow-x: scroll;
        width: 100vw;
        background-color: green;
        position: fixed;
        top: 0;
        left: 0;
      }
      .lqb_tabs::-webkit-scrollbar {
        display: none;
      }
      .lqb_tabs > div {
        padding: 0 10px;
        flex-shrink: 0;
      }
      .lqb_tabs_item.active_item {
        font-size: 20px;
        font-weight: bolder;
      }

      .main {
        padding: 10px;
        padding-top: 50px;
        height: 100vh;
        box-sizing: border-box;
        /* overflow: hidden; */
      }
      .lqb_cates {
        overflow-y: scroll;
        height: 100vh;
      }

      .lqb_pick_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        /* background-color: ; */
        padding: 0 10px;
      }
      .lqb_pick_title > span {
        color: gray;
      }

      .drew {
        padding-top: 20px;
      }
      .drew > img {
        border-radius: 15px;
      }
      .lqb_item {
        display: flex;
        height: 112px;
        margin: 10px 0;
      }
      .lqb_item > img {
        width: 150px;
        height: 112px;
      }
      .lqb_item > div {
        width: 176px;
        margin-left: 10px;
      }

      .drew > img {
        width: 343px;
        height: 137px;
        padding: 10px 0;
      }

      .lqb_item_info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .lqb_item_info > h3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
        overflow: hidden;
      }

      .lqb_item_info > span {
        font-size: 12px;
        color: gray;
      }

      .lqb_theme {
        display: flex;
      }
      .lqb_theme > h3 {
        width: 50px;
        flex-shrink: 0;
      }
      .lqb_themes {
        display: flex;
        flex-wrap: wrap;
      }

      .paixu {
        display: flex;
        justify-content: space-between;
      }
    </style>
  </head>

  <body>
    <div id="app">

    
      <!-- 分类选项卡 -->
      <lqb-tabs></lqb-tabs>

      <!-- 动态组件内容 -->
      <div class="main">
        <component :is="comName"></component>
      </div>
    </div>

    <template id="lqb_tabs">
      <div class="lqb_tabs">
        <div
          :class="{lqb_tabs_item:true,active_item:tabIdx==111}"
          @click="changeTabs(111)"
        >
          分类
        </div>
        <div
          :class="{lqb_tabs_item:true,active_item:tabIdx==222}"
          @click="changeTabs(222)"
        >
          精选
        </div>
        <div
          :class="{lqb_tabs_item:true,active_item:tabIdx==tab.id}"
          @click="changeTabs(tab.id)"
          v-for="tab in tabs"
          :key="tab.id"
        >
          {{tab.name}}
        </div>
      </div>
    </template>
    <!-- 分类 -->
    <template id="lqb_cates">
      <div class="lqb_cates" @scroll="loadMore">
        <div class="lqb_cates_search">
          <input type="text" placeholder="fyk" style="border: radius 6px" />
        </div>
        <div class="lqb_theme">
          <h3>主题</h3>
          <div class="lqb_themes">
            <div style="margin: 3px 8px; font-size: 12px; color: skyblue">
              全部
            </div>
            <div
              v-for="theme in themes"
              :key="theme.id"
              style="margin: 3px 8px; font-size: 12px; color: gray"
            >
              {{theme.name}}
            </div>
          </div>
        </div>
        <div class="paixu">
          <h3>排序</h3>
          <div style="transform: translateX(-35px)">
            <span style="color: skyblue; margin: 0 8px">综合</span>
            <span style="margin: 0 8px">最新</span>
            <span style="margin: 0 8px">最热</span>
          </div>
          <p style="color: skyblue">V更多筛选</p>
        </div>

        <div class="lqb_pick_first">
          <lqb-item :course="pick" v-for="pick in sates" :key="pick.id">
          </lqb-item>
        </div>
      </div>
    </template>

    <!-- 精选 -->

    <template id="lqb_pick">
      <div class="lqb_pick">
        <div class="drew">
          <img
            src="	https://ss.lanqb.com/o_1f8mp9vnuchogchc1map1vgr7.png"
            alt=""
          />
        </div>
        <div class="lqb_pick_first">
          <div class="lqb_pick_title">
            <h3>精选课程</h3>
            <span>筛选课程&gt;</span>
          </div>
          <lqb-item :course="pick" v-for="pick in picks" :key="pick.id">
          </lqb-item>
        </div>

        <div class="lqb_pick_first">
          <div class="lqb_pick_title">
            <h3>最新上架</h3>
            <span>查看更多&gt;</span>
          </div>
          <lqb-item :course="pick" v-for="pick in news" :key="pick.id">
            {{pick.title}}
          </lqb-item>
        </div>

        <div class="lqb_pick_first">
          <div class="lqb_pick_title">
            <h3>限时免费</h3>
          </div>
          <lqb-item :course="pick" v-for="pick in frees" :key="pick.id">
            {{pick.title}}
          </lqb-item>
        </div>
      </div>
    </template>

    <!-- 其他 -->
    <template id="lqb_common">
      <div class="lqb_common">
        <h1>其他</h1>
      </div>
    </template>

    <template id="lqb_item">
      <div class="lqb_item">
        <img
          class="lqb_img"
          :src="`https://ss.lanqb.com/${course.posters.mobile}`"
        />
        <div class="lqb_item_info">
          <h3 style="font-size: 12px">{{course.title}}</h3>
          <p style="display: flex; justify-content: space-between">
            <span>{{course.profile.nickname}}</span>
            <span>共{{course.preview_setting.lessons_count}}节</span>
          </p>
          <span>{{course.study_num}}人在学</span>
        </div>
      </div>
    </template>

    <script>
      let lqbItem = {
        template: "#lqb_item",
        props: ["course"],
      };
      // 封装请求工具
      function request(url) {
        return new Promise((resolve, rejevt) => {
          fetch(url)
            .then((resp) => resp.json())
            .then((data) => {
              resolve(data);
            });
        });
      }
      // 自定义 tabs
      let lqbTabs = {
        template: "#lqb_tabs",
        data() {
          return {
            tabs: [],
            tabIdx: 222,
          };
        },
        methods: {
          changeTabs(id) {
            this.tabIdx = id;
            let comname = "";
            switch (id) {
              case 111:
                comname = "lqbCates";
                break;
              case 222:
                comname = "lqbPick";
                break;
              default:
                comname = "lqbCommon";
                break;
            }
            this.$parent.setComName(comname);
          },
        },
        created() {
          let promise = request("https://m.lanqb.com/api/course-group-list");
          promise.then((data) => {
            this.tabs = data.course_fields;
          });
        },
      };

      //   分类组件
      let lqbCates = {
        template: "#lqb_cates",
        data() {
          return {
            themes: [],
            sates: [],
            curPage:1,
          };
        },
        methods: {
          loadMore(e) {
            if (
              e.target.scrollTop + e.target.clientHeight >=
              e.target.scrollHeight - 1
            ) {
              this.curPage++;
              // this.isloading=true;  // 显示 loading
              request(
                `https://m.lanqb.com/api/course/video?type=2&page=${this.curPage}`
              ).then((data) => {
                this.sates = [...this.sates, ...data.data];
                // this.isloading=false;  // 关闭loading
              });
            }
          },
        },
        created() {
          request("https://m.lanqb.com/api/course-group-list").then((data) => {
            this.themes = data.course_subjects;
            console.log(this.themes[0]);
          });
          request("https://m.lanqb.com/api/course/video?type=2&page=1").then(
            (data) => {
              this.sates = data.data;
            }
          );
        },
        components: {
          lqbItem,
        },
      };

      // 精选组件
      let lqbPick = {
        template: "#lqb_pick",
        data() {
          return {
            picks: [],
            news: [],
            frees: [],
          };
        },
        created() {
          // 精选课程
          const promise = request(
            "https://m.lanqb.com/api/course/video?is_recommend=Y&limit=8&not_ids="
          );
          promise.then((data) => {
            this.picks = data.data;
          });
          //   最新上架
          const promise1 = request(
            "https://m.lanqb.com/api/course/video?type=1&limit=8&not_ids=1273,1143,529,1413,1233,1281,1210,1426"
          );
          promise1.then((data) => {
            this.news = data.data;
          });
          const promise2 = request(
            "https://m.lanqb.com/api/course/video?is_free=Y&limit=8&not_ids=1273,1143,529,1413,1233,1281,1210,1426,1473,1471,1463,1462,1461,1460,1459,1458"
          );
          promise1.then((data) => {
            this.frees = data.data;
          });
        },
        components: {
          lqbItem,
        },
      };
      // 通用组件
      let lqbCommon = {
        template: "#lqb_common",
      };

      let vm = new Vue({
        el: "#app",
        data: {
          comName: "lqbPick",
        },
        methods: {
          setComName(name) {
            this.comName = name;
          },
        },
        components: {
          lqbTabs,
          lqbCates,
          lqbPick,
          lqbCommon,
        },
      });
    </script>
  </body>
</html>
